<template>
<div class="login-container">
    <!-- 登录框 -->
    <div class="login-box">
        <!-- logo -->
        <div class="login">
            <img src="../assets/logo.png" alt>
      </div>
            <!-- 用户名和密码文本框 -->
            <el-form :model="loginForm" :rules="loginrules" ref="loginFormref">
                <el-form-item prop="username">
                    <el-input placeholder="用户名" prefix-icon="iconfont icon-user" v-model="loginForm.username">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                     <el-input placeholder="密码" v-model="loginForm.password" :type="flag ? 'password' : 'text'">
                         <i slot="prefix" :class="['iconfont', flag ? 'icon-3702mima' : 'icon-showpassword']" @click="flag=!flag"></i>
                    </el-input>
                </el-form-item>

                 <!-- 登录 重置按钮 -->
                <el-row>
                    <el-col>
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info">提交</el-button>
                    </el-col>
                </el-row>
            </el-form>

           
        </div>
    </div>
</template>

<script>
// 使用mixins混入功能，将Login的逻辑代码注入在组件中
import mix from './login-mixins.js'
export default {
    mixins: [mix]
};
</script>

<style lang="less" scoped>
.login-container {
    background-color: skyblue;
    width: 100%;
    height: 100%;

    .login-box {
        width: 400px;
        height: 300px;
        border-radius: 4px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);

        .login {
            width: 100px;
            height: 100px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            position: relative;
            left: 50%;
            top: -60px;
            transform: translateX(-50%);
            background-color: #fff;
            box-shadow: 1px 1px 6px #eee;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
        .el-col {
            display: flex;
            justify-content: flex-end;
        }
        .el-form {
            padding: 10px;
            position: relative;
            top: -20px;
            .icon-3702mima,.icon-showpassword:hover {
                transition: all 0.5s ease;
                cursor: pointer;
                &:hover {
                    color: darkred;
                }
            }
        }
    }
}
</style>
